<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      待办事项
    </ion-title>
    <!-- end按钮显示在最右边 -->
    <ion-buttons end>
      <button ion-button icon-left (click)="addTask()">
      <ion-icon name="add"></ion-icon> <!-- 新增+-->
      </button>
    </ion-buttons>    
  </ion-navbar>
</ion-header>

<ion-content padding>
  <!--下拉刷新-->
  <ion-refresher (ionRefresh)=" doRefresh($event)">
    <ion-refresher-content
      pullingIcon="arrow-dropdown"
      pullingText="下拉刷新"
      refreshingSpinner="circles"
      refreshingText="刷新..."
    >
    </ion-refresher-content>
  </ion-refresher>
 <ion-list>
   <!--向右滑动控制待办事项-->
   <ion-item-sliding #slidingItem *ngFor="let task of tasks">
     <!--添加完成事项样式-->
      <ion-item [ngClass]="{'task_done':task.status==='done'}" (click)="editTask(task)">{{task.title}}</ion-item>
      <!--ionSwipe全扫手势操作，删除项目，-->
      <ion-item-options side="right" (ionSwipe)="removeTask(slidingItem,task)">
        <!--使点完按钮能自动关闭（点√加删除线）-->
        <button ion-button icon-only color="secondary" (click)="markAsDone(slidingItem,task)">
          <!-- √按钮图标 -->
          <ion-icon name="checkmark"></ion-icon>
        </button>
        <!--expandable按钮扩展延伸，全扫（按住向右滑动）使删除按钮边长，点击删除-->
        <button ion-button icon-only expandable color="danger" (click)="removeTask(slidingItem,task)">
          <!-- 垃圾桶图标 -->
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
   </ion-item-sliding>  
 </ion-list>
</ion-content>
